<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="名称">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="teacher.sort" controls-position="right" min="0" />
      </el-form-item>
      <el-form-item label="头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="大佬" />
          <el-option :value="2" label="究极大佬" />
        </el-select>
      </el-form-item>
      <el-form-item label="资历">
        <el-input v-model="teacher.career" />
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea" />
      </el-form-item>

      <!-- 教师头像 -->
      <el-form-item label="教师头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="teacher.avatar"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
          </el-button>
          <!-- v-show：是否显示上传组件
               :key：类似于id，如果一个页面多个图片上传控件，可以做区分
               :url：后台上传的url地址
               @close：关闭上传组件
               @crop-upload-success：上传成功后的回调 -->
          <image-cropper
                         v-show="imagecropperShow"
                         :width="300"
                         :height="300"
                         :key="imagecropperKey"
                         :url="BASE_API+'/eduoss/fileoss'"
                         field="file"
                         @close="close"
                         @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <!-- 保存 -->
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import teacherService from '@/api/edu/teacher'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  export default {
    components: { ImageCropper, PanThumb },
    data() {
      return {
        teacher: {},
        min: 0,

        //头像上传
        imagecropperShow:false,
        imagecropperKey:0,//上传组件key值
        BASE_API:process.env.BASE_API,
        saveBtnDisabled:false
      }
    },
    // watch（监听） 用来解决路由导航问题（修改切换添加时的bug）
    watch:{
      $route(to, from){
        this.init()
      }
    },
    created() {
      this.init()
    },
    methods: {
      cropSuccess(data){    //头像上传成功之后的回调
        this.imagecropperShow = false
        this.teacher.avatar = data.url
        this.imagecropperKey = this.imagecropperKey + 1 //变更图片组件id，第2次点击上传头像有bug
      },
      close(){    //关闭头像添加弹框
        this.imagecropperShow=false
        this.imagecropperKey = this.imagecropperKey + 1 //变更图片组件id，第2次点击上传头像有bug
      },
      init(){
        // 判断路径中是否有id值
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id
          this.findTeacherById(id)
        } else {
          this.teacher = {}
        }
      },
      findTeacherById(id) {
        teacherService.findTeacherById(id).then(response => {
          this.teacher = response.data.teacher
        })
      },
      saveOrUpdate(teacher) {
        if (!this.teacher.id) {
          teacherService.addTeacher(this.teacher).then(response => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            // 返回需要路由跳转
            this.$router.push({
              path: '/teacher/list'
            })
          })
        } else {
          teacherService.updateTeacher(this.teacher).then(response => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.$router.push({
              path: '/teacher/list'
            })
          })
        }
      }
    }
  }
</script>
